import { getToken, removeToken, setToken } from '@/utils/auth'
import { getUserInfo, login } from '@/api/user'
import { constantRoutes, resetRouter } from '@/router'

/**
 * @type {import('vuex').Module}
 */
const user = {
  namespaced: true, // 开启命名空间
  state: {
    token: getToken(), // vuex的默认token需要从本地存储获取
    userInfo: {}, // 当前的用户信息
    routes: constantRoutes // 默认情况下是静态路由数组
  },
  mutations: {
    setToken(state, token) {
      state.token = token // 把token数据存储到vuex中
      // 本地存储
      setToken(token)
    },
    removeToken(state) {
      // console.log('清空token')
      // console.log(state)
      state.token = null
      removeToken() //
    },
    //   设置用户信息的mutations
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    },
    setRoutes(state, newRoutes) {
      // 把接收到的动态路由数组和静态路由数组合并之后赋值给routes属性
      state.routes = [
        ...constantRoutes,
        ...newRoutes
      ]
    }
  },
  actions: {
    //   登录的接口会在actions里面进行调用
    async handleLogin(ctx, payload) {
      const res = await login(payload)
      console.log(res)
      //   存储到本地和vuex
      ctx.commit('setToken', res)
    },
    async getUserInfo(ctx) {
      const userInfo = await getUserInfo()
      // 获取到的用户信息存储到vuex;
      // 你要知道你要做什么事情？
      ctx.commit('setUserInfo', userInfo)
      return userInfo // return的目的是，调用的时候想要获取到这些个人信息
    },
    logOut(ctx) {
      // 清空token和用户信息
      ctx.commit('removeToken')
      // 用户信息
      ctx.commit('setUserInfo', {})
      // 退出登录的时候，重置路由信息
      resetRouter()
    }
  }
}

export default user

// function get() {}
